<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        
    </style>
</head>
<body>
    <!-- 添加事件有三种方式： -->
    <!-- 1、给元素设置onclick属性： 
        onclick="一段js代码"，比如：onclick="console.log(123);" 点击按钮，会输出123
        在onclick后面添加一段js代码，当点击标签的时候执行：触发鼠标点击事件
        在方法的参数列表()可以传递参数
        1. 可以传递任意类型的参数
        2. 可以使用 event 来表示事件对象
        3. 可以传递 this 关键字，来表示元素本身
    -->


    <button onclick="login(event);" type="button">登录</button>
    <button id="regist" type="button">注册</button>
<script>

    // login();
    function login(ev){
        // console.log('开始登录', arguments);
        console.dir(ev);
    }   


    var regist = document.getElementById('regist');
    // 2、使用onclick
    // 事件被触发时，会默认传递一个参数event，表示事件对象，可以用ev接收，不需要的时候，可以不写
    // regist.onclick = function(ev){
    //     console.log('开始注册', ev);
    // }
    
    var count = 0;
    var registClick = function(ev){
        count++;
        console.log('注册-----', count);
        if (count == 3) {
            // regist.removeEventListener('click', registClick);
            regist.onclick = null;//移除事件
        }
    }
    regist.onclick = registClick;

    // 3、添加事件监听： event 事件； listener 监听者
    // regist.addEventListener(eventType, callback);
    // eventType: 需要监听的事件类型：比如 click 鼠标点击事件， mouseover 等，不带on
    // callback: 触发事件时，执行的函数

    // regist.addEventListener('click', function(ev){
    //     console.log(ev);
    // });

    // 添加事件
    // regist.addEventListener('click', registClick);
    // 移除事件
    // regist.removeEventListener('click', registClick);
    
</script>
</body>
</html>